<template>
	<view>
		<view class="cu-bar search  bg-white tabbar border shop">
			<view @click="showModal" data-target="bottomModal" class="search-form round">
				<text class="cuIcon-search"></text>
				<input :disabled="true" type="text" placeholder="说点什么..." confirm-type="search" />
			</view>
			<view @click="handleClickItem(0)" class="action">
				<view class="cuIcon-comment text-menu-color"><view class="cu-tag badge">11</view></view>
			</view>
			<view @click="handleClickItem(1)" class="action"><view :class="info.collect?'text-menu-color':''" class="cuIcon-favor"></view></view>
			<view @click="handleClickItem(2)" class="action"><view  :class="info.praise?'text-menu-color':''"  class="cuIcon-appreciate"></view></view>
			<button @click="handleClickItem(3)" class="action" open-type="share"><view class="cuIcon-share"></view></button>
		</view>
		<cu-search-modal :modalName="modalName" @action="commit"></cu-search-modal>
	</view>
</template>

<script setup lang="ts">
import cuSearchModal from '../modal/cu-search-modal.vue';
import { ref, watch } from 'vue';
import { useSettingStore } from '@/stores/index';
const setting = useSettingStore();
const modalName = ref('');
const emit = defineEmits(['action', 'comment']);
const props = defineProps({
	content: {
		type: String,
		default: '提示'
	},
	icon: {
		type: String,
		default: 'cuIcon-loading2'
	},
	buttonStr: {
		type: String,
		default: ''
	},
	customStyle: {
		type: String,
		default: ''
	},
	height: {
		type: String,
		default: '400rpx'
	},
	show: {
		type: Boolean,
		default: false
	},
	info:{
		default:()=>{
			return {
				collect:false,
				praise:false
			}
		}
	}
});
watch(
	() => props.show,
	(newValue: any, oldValue: any) => {
		if (newValue == true) {
			modalName.value = 'bottomModal';
		}
	}
);
const handleClickItem = (e: any) => {
	emit('action', e);
};
const showModal = (e: any) => {
	modalName.value = e.currentTarget.dataset.target;
};
const hideModal = (e: any) => {
	modalName.value = '';
};
const commit = (e: any) => {
	modalName.value = '';
	emit('comment', e);
};
</script>

<style lang="scss" scoped>
.cu-bar {
	min-height: 30px;
}

.cu-bar.tabbar.shop .action {
	width: 120rpx;
	flex: initial;
}
.textareas {
	width: 80%;
	textarea {
		width: 100%;
		text-align: left;
		padding: 0.56rem;
	}
}
</style>
